<!DOCTYPE html>
<html>
<head>
  <title>创建E-com Pilot图标</title>
  <style>
    canvas {
      border: 1px solid #ccc;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>E-com Pilot图标生成器</h1>
  <div>
    <canvas id="icon16" width="16" height="16"></canvas>
    <canvas id="icon48" width="48" height="48"></canvas>
    <canvas id="icon128" width="128" height="128"></canvas>
  </div>
  <div>
    <button onclick="downloadIcons()">下载图标</button>
  </div>

  <script>
    // 绘制图标
    function drawIcon(canvas, size) {
      const ctx = canvas.getContext('2d');
      
      // 背景
      ctx.fillStyle = '#4285F4'; // Google蓝
      ctx.fillRect(0, 0, size, size);
      
      // 字母E
      ctx.fillStyle = 'white';
      const padding = size * 0.2;
      const lineHeight = (size - padding * 2) / 3;
      
      // E的主干
      ctx.fillRect(padding, padding, size * 0.2, size - padding * 2);
      
      // E的三横
      ctx.fillRect(padding, padding, size * 0.6, lineHeight * 0.6);
      ctx.fillRect(padding, padding + lineHeight, size * 0.5, lineHeight * 0.6);
      ctx.fillRect(padding, padding + lineHeight * 2, size * 0.6, lineHeight * 0.6);
    }
    
    // 绘制所有尺寸的图标
    drawIcon(document.getElementById('icon16'), 16);
    drawIcon(document.getElementById('icon48'), 48);
    drawIcon(document.getElementById('icon128'), 128);
    
    // 下载图标
    function downloadIcons() {
      downloadCanvas('icon16', 'icon16.png');
      downloadCanvas('icon48', 'icon48.png');
      downloadCanvas('icon128', 'icon128.png');
    }
    
    function downloadCanvas(id, filename) {
      const canvas = document.getElementById(id);
      const link = document.createElement('a');
      link.download = filename;
      link.href = canvas.toDataURL('image/png');
      link.click();
    }
  </script>
</body>
</html> 